<template>
  <div class="radio" >
    <Title :isNecessary="question.isNecessary" :no="no" :title="question.title"></Title>
    <div>
      <el-radio-group v-model="radio" @change="select" >
        <div v-for="(item, index) in question.options" class="option">
          <el-radio :label="item.id" :disabled="!(item.store===null || item.store>=1)">
            <span style="font-size: 20px; font-weight:bold">{{item.text}}</span>
            <div class="description">
              {{item.description}}
            </div>
          </el-radio>
          <div style="float: right; font-size: 15px;margin-top: 28px">剩余名额：{{item.store===null?'无限额':item.store}}</div>

        </div>
      </el-radio-group>
    </div>
  </div>
</template>

<script>
import Title from './Title.vue'

export default {
  name:'Radio',
  components: {
    Title,
  },
  data(){
    return {
      //  radio: 0,
    }
  },
  props: {
    question: {
      type: Object,
      default: {}
    },
    no: {
      type: Number,
      default: 0
    },
    radio: {
      type: Number,
      default: 100
    }
  },
  mounted() {
    // this.getRadio()
  },
  emits: ['changeRadio'],
  methods: {
    select() {
      if(this.question.answer == null){
        this.question.answer = []
        this.question.answer.push(this.radio)
      }else{
        this.question.answer[0] = this.radio
      }
      if(this.question.hasOwnProperty("call")){
        this.question.call();
      }
      this.$emit('changeRadio', this.question)
    },
  },
}
</script>

<style scoped src='../css/radio.css'>
/* @import url('../css/radio.css'); */
</style>
